<template>
    <div class="login-pop">
        <img src="/public/images_slices/loginbj.png" alt="">
        <div class="login-input">
            <h3>登陆</h3>
            <input type="username" placeholder="请输入用户名" v-model="user.username">
            <br>
            <input type="password" placeholder="请输入密码" v-model="user.password">
            <button @click="login">登陆</button>
        </div>
    </div>
</template>

<script setup>
import {  reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let user = reactive({
    username: '',
    password: ''
})

const login = () => {
    if (user.username == '' || user.password == '') {
        ElMessage({
            message: "密码或用户名不能为空",
            type: 'success',
        })
    } else {
        router.push('/load')
        localStorage.setItem('token', JSON.stringify(user))
    }
}

</script>
<style scoped lang="less">
.login-pop {
    img {
        width: 500px;
        height: 600px;
        object-fit: fill;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .login-input {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);

        h3 {
            text-align: center;
            margin-top: 30px;
        }

        input {
            border: none;
            border-bottom: 1px solid #ccc;
            margin-top: 30px;
            width: 300px;
            height: 30px;
            font-size: 16px;
            outline: none;
            padding-left: 10px;
            background: none;
            margin-left: 50px;
        }

        button {
            width: 300px;
            height: 40px;
            background: #ff6700;
            border: none;
            margin-left: 50px;
            margin-top: 30px;
            border-radius: 5px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
        }
    }
}
</style>
